<template>
  <div class="other-top-head head-fixed" style="box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px">
    <div class="navbar-wrap">
      <div class="new-nav-page list-scroll-white" style="width: 100%">
        <headerCon></headerCon>
      </div>
    </div>
  </div>

  <div class="details-content" v-infinite-scroll="load" infinite-scroll-distance="100"
    :infinite-scroll-disabled="disabled" style="overflow: auto" v-loading="fullscreenLoading">
    <div class="wrap-breadcrumb">
      <div class="main-experimental">
        <div class="main-details clearfix main-details-ab2">
          <div class="thumbs-images">
            <div class="divbanner">
              <div :class="userInfo.isLogin() ? 'contenthtml' : 'disable-scroll'" v-if="ascription == 1">
                <span v-html="productList.content"></span>
                <div class="login-bottom" :style="{
                  display: userInfo.isLogin() ? 'none' : 'inline-block',
                }" @click="notLogin()">
                  <span>登录查看完整文本 <i></i></span>
                </div>
              </div>
              <el-carousel height="622px" indicator-position="none" v-else ref="remarkCaruselUp" @contextmenu.prevent
                :arrow="productList.banner_count > 1 ? 'hover' : 'never'" v-model="currentIndex" :interval="10000"
                :initial-index="currentIndex" @change="handleCarouselChange">
                <el-carousel-item v-for="(item, index) in productList.banner_path" :key="index" :name="'i' + index">

                  <el-image class="bannerimg" :src="item.path" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                    draggable="false" @dragstart.prevent preview-teleported :initial-index="index" fit="cover"
                    v-if="!item.is_video"> <!--:preview-src-list="productList.banner_path"-->
                    <template #error>
                      <div class="error-placeholder">
                        <img :src="siteConf.defalut_product_img" style="width: 100%; height: 100%; object-fit: cover"
                          alt="默认图片" />
                      </div>
                    </template>
                  </el-image>
                  <div v-else>
                    
                    <VideoPlayer :video-url="item.path"  />
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
            <div class="thumbnail-wrapper" v-if="ascription != 1">
              <div v-for="(thumbnail, index) in productList.banner_path" :key="index" class="thumbnail"
                :class="{ activeBanner: currentIndex === index }" @click="goToThumbnail(index)">
                <img :src="thumbnail.path" alt="Thumbnail" @error.once="useDefaultImage" v-if="!thumbnail.is_video" />
                <img :src="thumbnail.path" alt="Thumbnail" @error.once="useDefaultVideoImage" v-else />
                
              </div>
            </div>
          </div>
          <div class="detail-right detail-right-ab2">
            <div class="material-info model-limit-height">
              <div class="title-material clearfix">
                <h1 class="model-name" :title="productList.title">
                  {{ productList.title || "" }}
                </h1>
                <div class="copy-text" v-if="isShow">
                  ID
                  <em>{{ productList.product_ids }}</em>
                  <span class="copy" @click="copyClick(productList.product_ids)">复制</span>
                  <span class="upload-time">{{ productList.yearDate }}</span>
                </div>
                <span class="optin-item star" v-if="isShow" @click="collectClick(productList.id)"
                  :class="productList.is_collect ? 'collect-active' : ''">
                  <el-icon size="18">
                    <component is="StarFilled"></component>
                  </el-icon>
                  <em>{{ productList.is_collect ? "已收藏" : "收藏" }}</em>
                </span>
              </div>
              <div class="item-material-content topTitle" style="color: #fff" v-if="productList.productCombo">
                <div class="title_sub" v-for="(value, index) in productList.productCombo[comboDefault].combo.content"
                  :key="index">
                  <span>{{ value.key }}</span>
                  <span>{{ value.value }}</span>
                </div>
              </div>
              <div style="color: #fff">
                <div style="display: flex; justify-content: space-between">
                  <div>请选择下载套餐</div>
                  <div @click="checkComboIntroduce"><span style="cursor:pointer;">查看套餐权益说明</span></div>
                </div>
                <div style="margin-top: 10px">
                  <el-select v-model="comboValue" placeholder="请选择套餐" style="width: 100%" clearable @clear="comboClear">
                    <el-option @click.native="comboChange(item, index)"
                      v-for="(item, index) in productList.productCombo" :key="item.combo.id" :label="item.combo.title"
                      :value="item.combo.id"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="footerbtn" style="
                  padding: 0 0 0 0;
                  position: absolute;
                  bottom: 0;
                  width: 100%;
                ">
                <div v-if="productList.is_sf == 1">
                  <p class="p_page" style="display: block">
                    <span></span>
                    <span></span>
                  </p>
                  <div class="ptj"   v-if="siteConf.is_download == 1">
                    <div style="display: inline-block" v-if="downloadprice > 0">
                      <div class="i_title">套餐价格</div>
                      <div class="ppzs">
                        <span style="font-size: 22px; margin-left: 10px">{{
                          downloadprice || 0
                        }}</span>元
                      </div>
                    </div>
                    <div style="display: inline-block" v-else>
                      <div class="i_title">请选择下载套餐</div>

                    </div>
                    <!-- <div class="vipTitle">
                      <div class="ootitle">
                        <div class="psize">VIP专享价</div>
                        <div class="ppzs">
                          <span>{{ productList.vip_price || 0 }}</span>KM币
                        </div>
                      </div>
                    </div> -->
                  </div>
                </div>
                <div v-if="productList.is_sf == 0">
                  <p class="p_page" style="display: block">
                    <span></span>
                    <span></span>
                  </p>
                  <div class="ptj">
                    <div style="display: inline-block">
                      <!-- <div class="i_title">产品价格</div>
                      <div class="ppzs" style="text-decoration: line-through;color: #a3a3a3;font-size: 14px;font-weight:bold;">
                        <span style="font-size: 14px; margin-left: 10px;">0</span>
                      </div>
                      <span style="font-size: 14px;color: white;"> 元</span> -->
                    </div>
                    <div class="vipTitle">
                      <div class="ootitle">
                        <div class="psize">免费下载</div>
                        <div class="ppzs">
                          <!-- <span>0</span>KM币 -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <!-- @click.stop="startDownload(productList.id)" -->
                  <div class="btn" v-if="isShow " style="cursor: pointer; padding: 0 20px"
                    @click.stop="openDownLoad(productList)">
                    <div class="btntitle" v-if="siteConf.is_download == 1">立即下载</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 更多模型推荐 -->
      <!-- <div style="
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 100%;">
    <recomm :recommendList="recommendList" v-if="isShow" :isTitle="true"></recomm>
      <div style="margin-bottom: 30px" v-if="isShow">
        <div style="text-align: center; color: #fff" v-if="loading">
          加载中...
        </div>
        <div style="text-align: center; color: #fff" v-if="noMore">
          没有更多了
        </div>
      </div></div> -->
      <ul style="
    display: flex;
    justify-content: center;
    width: 100%;">
          <ul v-infinite-scroll="load" infinite-scroll-distance="100" :infinite-scroll-disabled="disabled"
            style="overflow: hidden;width:90%;">
            <!-- <waterfallContent :productList="productList" :gutter="gutter"></waterfallContent> -->
            <recomm :recommendList="recommendList" :oneId="productList.nav_one_id" :zhTitle="title" :enTitle="enTitle"  v-if="isShow" :isTitle="true"></recomm>
          </ul>
          <!-- <div style="text-align: center;margin-top: 60px; color:#ffffff;" v-if="loading">加载中...</div>
          <div style="text-align: center;margin-top: 60px; color:#ffffff;" v-if="noMore">没有更多了</div> -->
        </ul>
    </div>
  </div>
  <login></login>
  <footerContent></footerContent>

  <!-- 下载进度条弹窗 --->
  <el-dialog v-model="downloadDialogVisible" title="下载进度" width="500" append-to-body align-center
    modal-class="overlay-modal" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false">
    <el-progress :text-inside="true" :stroke-width="26" :percentage="progress"></el-progress>
    <div v-if="progress == 100">下载完成</div>
  </el-dialog>
  <!-- 下载弹出页面 -->
  <el-dialog v-model="openDownloadDialog" height="498" width="876" class="openDownloadDialog" append-to-body
    align-center modal-class="overlay-modal" :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="download-layer-fixed">
      <div class="download-layer-content">
        <a class="download-left-adv">
          <img :src="siteConf.download_pay_img" alt="" />
        </a>
        <div class="download-right-content">
          <h2>支付页面</h2>
          <!-- <div class="copyright-description">
          <span>版权说明</span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-question-circle-fill1"></use>
          </svg>
        </div> -->
          <!-- 作品信息 -->

          <!-- 价格明细 -->
          <ul class="prices-list">
            <li class="prices-item prices-using-assets">
              <div class="list-type-width">
                <span>套餐名称</span>
              </div>
              <div class="list-type-content" style="width: 100%">
                <el-select v-model="comboValue" placeholder="请选择套餐" style="width: 100%" clearable @clear="comboClear">
                  <el-option @click.native="comboChange(item)" v-for="(item, index) in productList.productCombo"
                    :key="item.combo.id" :label="item.combo.title" :value="item.combo.id"></el-option>
                </el-select>
              </div>
            </li>
            <li class="prices-item prices-preferential">
              <div class="list-type-width"><span>权益介绍</span></div>
              <div class="list-type-content">
                <div class="preferential-content">
                  <div class="preferential-list-rules" @click="checkComboIntroduce">
                    <span style="cursor:pointer;">可查看套餐权益介绍</span>
                  </div>
                </div>
              </div>
            </li>
            <li class="prices-item prices-preferential" v-if="isDownload == 2">
              <div class="list-type-width"><span>优惠</span></div>
              <div class="list-type-content">
                <div class="preferential-content">
                  <div class="preferential-list-rules">
                    <span>已下载素材{{ siteConf.download_day || 0 }}天内重复下载免费</span>
                  </div>
                </div>
              </div>
            </li>
            <li class="prices-item prices-theprice">
              <div class="list-type-width"><span>价格</span></div>
              <div class="list-type-content prices-theprice-content theprice-pay-number" v-if="isDownload !== 2">
                <div class="content-real-pay">
                  <span><b class="theprice_down_price">{{ downloadprice || 0 }}</b><span class="unit">元</span>
                  </span>
                </div>
              </div>

              <div class="list-type-content prices-theprice-content theprice-pay-number" v-if="isDownload == 2">
                <div class="content-real-pay">
                  <span><b class="theprice_down_price">0</b><span class="unit">元</span>
                  </span>
                </div>
                <div class="content-pay theprice-through-line">
                  {{ downloadprice || 0 }}元
                </div>
              </div>
            </li>
            <li class="prices-item prices-method-payment">
              <div class="list-type-width">
                <span>支付方式</span>
              </div>
              <div class="list-type-content list-type-payment-content">
                <div style="
                    display: flex;
                    align-items: center;
                    margin-right: 20px;
                    border: 1px solid #9e9d9d;
                    padding: 5px 10px;
                    border-radius: 6px;
                    cursor: pointer;
                  " :class="prActivePay == 1 ? 'payactive' : ''" @click="payClick(1)">
                  <el-icon size="24px">
                    <SvgIcon iconName="icon-weixin1" />
                  </el-icon>
                  <span>微信支付</span>
                </div>
                <div :class="prActivePay == 2 ? 'payactive' : ''" style="
                    display: flex;
                    align-items: center;
                    border: 1px solid #9e9d9d;
                    padding: 5px 10px;
                    border-radius: 6px;
                    cursor: pointer;
                  " @click="payClick(2)">
                  <el-icon size="24px">
                    <SvgIcon iconName="icon-zhifubao3" />
                  </el-icon><span>支付宝支付</span>
                </div>
              </div>
            </li>
          </ul>
          <div class="content-text-list">
            <div class="operation-btn-base js-operation-download" @click.stop="openJbClick">
              <span style="line-height: 42px !important">{{ payBtn }}</span>
              <!-- <div class="price-num"></div> -->
            </div>
            <!-- <div v-if="!comparisonResult" class="operation-btn-base js-operation-download" @click.stop="openJbClick">
              <span>立即充值</span>
              <div class="price-num">（余额：{{ userInfo.money || 0 }}）</div>
            </div>
            <div v-if="comparisonResult" class="operation-btn-base js-operation-download"
              @click.stop="startDownload(productList.id)">
              <span>立即下载</span>
              <div class="price-num">（余额：{{ userInfo.money || 0 }}）</div>
            </div>
            <div class="operation-text" v-if="isDownload == 2 || comparisonResult">
              <p>
                <i>*</i>已下载模型3天内可免费重复下载,VIP用户重复下载永久免费
              </p>
            </div>
            <div class="operation-text" v-if="!comparisonResult">
              <p><i>*</i>温馨提示：您的KM币<span>余额不足</span></p>
            </div> -->
          </div>
          <el-dialog v-model="innerVisible" width="300" title="扫码支付" align-center modal-class="overlay-modal"
            :close-on-press-escape="false" :close-on-click-modal="false" append-to-body @closed="innerClosed">
            <div style="
                padding: 2px;
                display: flex;
                justify-content: center;
                align-items: center;
              ">
              <img :src="payArr" style="border: 1px solid #ebeef5; width: 230px; height: 230px" />
              <div class="icon-pay-loadding" v-if="isLoading">
                <span></span><em>正在加载...</em>
              </div>
              <div class="icon-expire-pay" v-if="isRefresh" @click="refreshPay">
                <i></i><span>二维码已超时<br />请刷新</span>
              </div>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </el-dialog>

  <!-- 下载完成 -->
  <el-dialog class="openDownload" v-model="downloadDialog" width="1004" height="654" append-to-body align-center
    modal-class="overlay-modal" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="showClose">
    <div class="repeat-download">
      <div :style="backgroundStyle" class="repeat-download-title"></div>
      <div class="repeat-download-list">
        <div style="padding: 23px 23px 0">
          <el-progress :text-inside="true" :stroke-width="26" :percentage="progress"></el-progress>
        </div>
        <h3>- 为您推荐 -</h3>
        <ul class="repeat-ul">
          <li v-for="(item, index) in recommendList" :key="index">
            <a href="#"><img :src="item.image_url" @error.once="useDefaultImage" alt="" /></a>
            <div class="download-list-name" style="display: none; opacity: 1">
              <span>{{ item.title }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </el-dialog>


  <!-- 套餐权益 --->
  <el-dialog v-model="comboDialogVisible" title="套餐权益对比" width="900" append-to-body align-center
    @close="comboDialogClose" modal-class="overlay-modal" :close-on-press-escape="false" :close-on-click-modal="false">
    <div class="benefit-list">
      <!-- 权益项1 -->
      <div class="benefit-item" v-for="(item, index) in productList.productCombo" :key="index">
        <h3 style="text-align: center;">{{ item.combo.title }}</h3>
        <div class="content">
          <span>键</span>
          <span>值</span>
        </div>
        <div class="content" v-for="(v, i) in item.combo.content" :key="i">
          <span>{{ v.key }}</span>
          <span>{{ v.value }}</span>
        </div>
        <h3 style="text-align: center;"><text style="font-size: 13px;">价格</text><text
            style="font-size: 18px; margin: 0 5px;color: #e85623;">{{ item.combo.price }}</text><text
            style="font-size: 13px;">元</text></h3>
      </div>
    </div>

  </el-dialog>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, nextTick, reactive  } from "vue";
import headerCon from "../../components/headerTwo.vue";
import login from "../../components/login.vue";
import { decrypt, DEFAULTKEY } from "../../utils/keyEnum";
import { useRoute } from "vue-router";
import { productDetail, productCare } from "../../api/home/index";
import useClipboard from "vue-clipboard3";
import { ElCarousel, ElMessage, ElLoading } from "element-plus";

import { useNavConfig } from "../../stores/navConfig";
import { useUserConfig } from "../../stores/userConfig";
import VideoPlayer from '@/components/VideoPlayerTwo.vue'

const userConfig = useUserConfig(); //获取用户信息
import {
  productRecommend,
  productDownloadUrl,
  insertUserDownloadLog,
  checkUserDownload,
} from "../../api/product/index";
import recomm from "../../components/recommendTwo.vue";
import footerContent from "../../components/footerContent.vue";
import axios from "axios";
import {
     getNavigaion
} from "../../api/home/index";
import { useUserInfo } from "../../stores/userInfo";
import eventBus from "../../utils/event-bus";
import { useSiteConfig } from "../../stores/siteConfig";
import { checkPay, createOrder, doPayment } from "../../api/pay";
const siteConf = useSiteConfig();
const navConfig = useNavConfig();
const userInfo = useUserInfo(); //获取用户信息
const route = useRoute();
const prActivePay = ref(1);
const isShow = ref(true);
const showClose = ref(false);
const openDownloadDialog = ref(false); //下载弹窗
const downloadDialog = ref(false); //下载完成弹窗
const innerVisible = ref(false);
const comboDialogVisible = ref(false)

const comboDefault = ref(0)
const comboValue = ref('')
const autoplay = ref(true);//是否自动切换
const isPlay = ref(false);//播放状态
const isIn = ref(false)//鼠标是否位于播放器内

const queryValue = computed(() => {
  return decrypt(route.query.value || "", DEFAULTKEY);
});
const product_id = queryValue.value.product_id
  ? queryValue.value.product_id
  : 0;
const ascription = queryValue.value.ascription
  ? queryValue.value.ascription
  : 0;
const productTotal = ref(0);
const page = ref(1);
const limit = ref(10);
const loading = ref(false);
const noMore = computed(() => page.value * limit.value > productTotal.value);
const disabled = computed(() => loading.value || noMore.value);
const value = ref("");
const payBtn = ref("立即支付")
//默认图片
const useDefaultImage = (event: any) => {
  event.target.src = siteConf.defalut_product_img;
};
const useDefaultVideoImage = (event: any) => {
  event.target.src = siteConf.default_video_img;
};
const downloadprice = ref(0);
//打开下载弹窗
const openDownLoad = (item: any) => {
  //判断是否登录
  if (!userInfo.isLogin()) {
    eventBus.emit("customEvent", {
      dis: true,
    });
  } else {
    typeBtn.value = true
    if (item.is_sf == 0) {
      startDownload(item.id, combo_id.value)
    } else {
      if (downloadprice.value == 0) {
        return ElMessage.error("请选择下载套餐");
      }
      checkUserDownloadInfo();
    }


  }
};
const typeBtn = ref(false)
const combo_id = ref(0)
//选择套餐
const comboChange = (value: any, indx: number) => {
  downloadprice.value = value.combo.price || 0;
  combo_id.value = value.combo.id
  comboValue.value = value.combo.id;
  comboDefault.value = indx
  checkUserDownloadInfo();
};
//清空套餐
const comboClear = () => {
  downloadprice.value = 0;
};
//检测用户是否下载过
//1超过3天 2 未超过3天 3 未下载
const isDownload = ref(3);
const checkUserDownloadInfo = () => {
  checkUserDownload({ product_id: product_id, combo_id: combo_id.value })
    .then((res: any) => {
      if (res.code == 1) {
        progress.value = 0;
        isprogress.value = false;
        isDownload.value = res.data.is_download;
        if (typeBtn.value) {
          openDownloadDialog.value = true;
        }
        if (res.data.is_download == 2) {
          payBtn.value = '立即下载'
        }

      }
    })
    .catch((error: any) => {
      console.log(error);
    });
};

//支付方式选择
const payClick = (acId: number) => {
  prActivePay.value = acId;
};

//下单 获取支付二维码
interface orderItemForm {
  pay_price: number;
  product_id: number;
  vip_price_id: number;
  recharge_coin_id: number;
  pay_type: number;
  recharge_type: number;
  vip_type: number;
  remark: string;
  pay_str: string;
}
//订单信息初始化
const createOrderData = reactive<orderItemForm>({
  pay_price: 0,
  vip_price_id: 0,
  product_id: 0,
  recharge_coin_id: 0,
  pay_type: 0, //支付类型
  recharge_type: 4,
  vip_type: 0,
  remark: "产品下载",
  pay_str: "微信支付",
});



//轮询订单是否支付

//打开金币充值弹窗
// const openJbClick = () => {
//   eventBus.emit("openJbCustomEvent", {
//     dis: true,
//   });
// };
//立即支付
const openJbClick = () => {
  if (downloadprice.value == 0) {
    return ElMessage.error("请选择支付套餐");
  }
  if (isDownload.value == 2) {
    startDownload(product_id, combo_id.value)
  } else {

    createOrderData.pay_price = downloadprice.value;
    createOrderData.pay_type = prActivePay.value;
    createOrderData.pay_str = prActivePay.value == 1 ? "微信支付" : "支付宝支付";
    createOrderData.remark = prActivePay.value == 1 ? "微信支付产品下载" : "支付宝支付产品下载";
    createOrderData.product_id = product_id
    createOrderInfo(createOrderData);
  }


};
const errorMessage = ref("");
const isLoading = ref(false); //加载
const isRefresh = ref(false);
//刷新二维码
const refreshPay = () => {
  isRefresh.value = false;
};
//创建订单
const order_no = ref("");
const createOrderInfo = (createOrderData: any) => {
  const loading = ElLoading.service({
    lock: true,
    text: "请稍等,正在处理...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  createOrder({ createOrderData: createOrderData })
    .then((res: any) => {
      if (res.code == 1) {
        order_no.value = res.data.order_no;
        paymentFun();
      }
    })
    .catch((error: any) => {
      ElMessage.error(error.msg);
    })
    .finally(() => {
      loading.close();
    });
};
const payArr = ref<any>([]);
//支付二维码
const paymentFun = () => {
  payBtn.value = "正在支付"
  innerVisible.value = true;
  isLoading.value = true;
  doPayment({ order_sn: order_no.value, tab: prActivePay.value }).then((res: any) => {
    if (res.code == 1) {
      payArr.value = res.data;
      startPolling(); //轮询
    }
  })
    .catch((error) => {
      ElMessage.error("其他错误" + error);
    }).finally(() => {
      isLoading.value = false;
    });
};
//检查订单是否支付
const check_pay = async () => {
  try {
    // 获取下载的url
    const res: any = await checkPay({ order_no: order_no.value });
    if (res.code === 1) {
      //停止轮询
      stopPolling();
      innerVisible.value = false;
      openDownloadDialog.value = false;
      comboValue.value = ''
      downloadprice.value = 0
      typeBtn.value = false
      startDownload(product_id, combo_id.value)
    }
  } catch (error: any) {
    if (error.code == 203) {
      isRefresh.value = true;
      //停止轮询
      stopPolling();
    }
  }
};

//轮询
const intervalId = ref<number | null>(null);
const startPolling = () => {
  if (intervalId.value !== null) return;
  intervalId.value = window.setInterval(check_pay, 3000); // 每1秒轮询一次
};

//停止轮询
const stopPolling = () => {
  if (intervalId.value !== null) {
    window.clearInterval(intervalId.value);
    intervalId.value = null;
  }
};
//关闭
const innerClosed = () => {
  stopPolling()
  payBtn.value = "立即支付"
  innerVisible.value = false;
}
const backgroundStyle = computed<Record<string, string>>(() => {
  return {
    backgroundImage: `url(${isprogress.value
      ? siteConf.accomplish_download
      : siteConf.progress_download
      })`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
  };
});
//下拉加载
const load = () => {
  loading.value = true;
  setTimeout(() => {
    page.value++;
    productRecommendList(productList.value['nav_one_id']);
    loading.value = false;
  }, 2000);
};
const fullscreenLoading = ref(false)

//获取详情
const productList = ref<any>([]);
const nav_one_id = ref('')
const detailInfo = () =>{
  fullscreenLoading.value = true
  productDetail({ id: product_id })
  .then((res: any) => {
   // 启动全屏加载
    if (res.code == 1) {
      isShow.value = true;
      productList.value = res.data.list;
      productRecommendList(res.data.list.nav_one_id);
      fullscreenLoading.value = false
    }
  })
  .catch((error) => {
    isShow.value = false;
    // ElMessage.error("素材不存在或已下架");
  });
}


//计算金额大小
const comparisonResult = computed(() => {
  if (parseInt(userInfo.money) > parseInt(productList.value.price)) {
    return true;
  } else if (parseInt(userInfo.money) < parseInt(productList.value.price)) {
    return false;
  } else {
    return true;
  }
});

//查看权益说明
const checkComboIntroduce = () => {
  comboDialogVisible.value = true
}
//关闭
const comboDialogClose = () => {
  comboDialogVisible.value = false
}


//登录
const notLogin = () => {
  eventBus.emit("customEvent", {
    dis: true,
  });
};
//复制按钮
const { toClipboard } = useClipboard();
const copyClick = async (ids: string) => {
  try {
    if (!userInfo.isLogin()) {
      eventBus.emit("customEvent", {
        dis: true,
      });
    } else {
      await toClipboard(ids);
      ElMessage.success("已成功复制模型ID！可粘贴搜索查看!");
    }
  } catch (e) {
    ElMessage.error("复制失败" + e);
  }
};
//收藏
const collectClick = (id: Number) => {
  productCare({ id: id })
    .then((res: any) => {
      if (res.code == 1) {
        productList.value.is_collect = !productList.value.is_collect;
        ElMessage.success(
          productList.value.is_collect ? "收藏成功" : "取消收藏成功"
        );
      }
    })
    .catch((err: any) => {
      console.log(err);
    });
};
//下载获取url
const downloadDialogVisible = ref(false);

const startDownload = async (id: number, combo_id: number) => {
  if (userInfo.isLogin()) {
    try {
      // 获取下载的url
      const res: any = await productDownloadUrl({
        product_id: id,
        charge: isDownload.value,
        combo_id: combo_id
      });
      if (res.code == 1) {
        // 弹窗
        downloadDialog.value = true;
        openDownloadDialog.value = false;
        comboValue.value = ''
        downloadprice.value = 0
        typeBtn.value = false
        downloadFile(res.data.list);
        // 调用 fetchUserInfo 并等待其完成
        //await userInfo.fetchUserInfo();
      }
    } catch (error: any) {
      if (error?.code == 0) {
        ElMessage.error(error.msg);
      } else {
        ElMessage.error("其他错误");
      }
    }
  } else {
    eventBus.emit("customEvent", {
      dis: true,
    });
  }
};
const currentIndex = ref(0); // 当前轮播图的索引

const remarkCaruselUp: any = ref(null);
const handleCarouselChange = (newIndex: number) => {


  currentIndex.value = newIndex;
};
const goToThumbnail = (index: number) => {
  // 跳转到指定的缩略图对应的轮播图
  nextTick(() => {
    remarkCaruselUp.value.setActiveItem("i" + index);
  });

  currentIndex.value = index;
};
// const startDownload = async (id: number) => {
//   if (userInfo.isLogin()) {
//     //获取下载的url
//     productDownloadUrl({ product_id: id })
//       .then((res: any) => {
//         if (res.code == 1) {
//           //弹窗
//           downloadDialog.value = true;
//           openDownloadDialog.value = false
//           downloadFile(res.data.list);
//           await userInfo.fetchUserInfo();
//         }
//       })
//       .catch((error: any) => {
//         if (error.code == 0) {
//           ElMessage.error(error.msg);
//         } else {
//           ElMessage.error("其他错误");
//         }
//       });
//   } else {
//     eventBus.emit("customEvent", {
//       dis: true,
//     });
//   }
// };
//下载
const progress = ref(0);
const isprogress = ref(false);
const downloadFile = async (item: any) => {
  await axios({
    method: "get",
    url: item.url,
    responseType: "blob",
    onDownloadProgress: (progressEvent: any) => {
      if (progressEvent.lengthComputable) {
        const percentCompleted = Math.round(
          (progressEvent.loaded * 100) / progressEvent.total
        );
        progress.value = percentCompleted;
        console.log(progress.value);
      }
    },
  })
    .then((res) => {
      const blob = new Blob([res.data]);
      // 非IE下载
      const elink = document.createElement("a");
      elink.download = item.name;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
      //添加下载记录
      insertUserDownloadLog({ product_id: item.id, combo_id: combo_id.value }).then((res_log: any) => {
        if (res_log.code == 1) {
          setTimeout(() => {
            //progress.value = 0;
            isprogress.value = true;
            showClose.value = true;
            comboValue.value = ''
            //downloadDialogVisible.value = false;
          }, 3000);
        }
      });
    })
    .catch((error) => {
      ElMessage.error("下载失败");
    })
    .finally(() => {
      downloadDialogVisible.value = false;
    });
};
const recommendList = ref<any>([]);
const title = ref('')
const enTitle = ref('')
const productRecommendList = (id:number) => {
  productRecommend({
    page: page.value,
    limit: limit.value,
    type_id:id,
  }).then((res: any) => {
    if (res.code == 1) {
      productTotal.value = Number(res.data.total);
      if (res.data.list.length > 0) {
        title.value = res.data.list[0]['navOne']['alias_title'] ?? '';
        enTitle.value = res.data.list[0]['navOne']['alias_title_en'] ?? '';
        recommendList.value = [...recommendList.value, ...res.data.list];
      }
    }
  });
};
//加载BusEvent 大类

onMounted(() => {
  detailInfo()
});
</script>
<style>
@import url("@/style/detail.css");

.el-progress-bar__inner {
  background-color: #e85623 !important;
}

.thumbnail-wrapper {
  display: flex;
  overflow-x: auto;
  z-index: 1000;
  position: absolute;
  bottom: 53px;
  /* 与轮播图保持一定距离 */
}

.thumbnail {
  flex: none;
  /* 防止缩略图拉伸 */
  width: 50px;
  /* 缩略图的宽度，可以根据需要调整 */
  height: 50px;
  /* 缩略图的高度，可以根据需要调整 */
  margin-right: 2px;
  /* 缩略图之间的间距 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击 */
  border: 1px solid rgb(124, 118, 118);
  border-radius: 6px;
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 保持图片比例填充 */
  border-radius: 6px;
}

.activeBanner {
  border: 1px solid #e85623;
}

.payactive {
  border: 1px solid #e85623;
  background-color: #e85623 !important;
}

.icon-pay-loadding {
  width: 220px;
  height: 220px;
  position: absolute;
  left: 40px;
  bottom: 24px;
  border-radius: 0;
  background-color: #efefef;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 0px !important;
}

.icon-pay-loadding span {
  background: url(https://static.3d66.com/act/images/global-act-pay/loading.png) center no-repeat;
  width: 32px;
  height: 32px;
  display: block;
  margin: 0 auto 20px;
  -webkit-animation: iconfont 1.8s linear infinite;
  animation: iconfont 1.8s linear infinite;
}

@keyframes iconfont {
  from {
    transform: rotate(0deg);
    /* 从0度开始旋转 */
  }

  to {
    transform: rotate(360deg);
    /* 旋转到360度 */
  }
}

.icon-expire-pay {
  position: absolute;
  border-radius: 0;
  width: 220px;
  height: 220px;
  left: 40px;
  bottom: 24px;
  text-align: center;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.8);
}

.icon-expire-pay i {
  background: url(https://static.3d66.com/act/html/act-20200725/img/refresh.png) center no-repeat;
  width: 30px;
  height: 30px;
  background-size: cover;
  cursor: pointer;
  margin: 60px auto 15px;
  display: block;
  animation: iconfont 1.8s linear infinite;
}

.icon-expire-pay span {
  color: #fff;
  font-size: 12px;
  line-height: 18px;
}


.benefit-list {
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.benefit-item {
  width: 200px;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.benefit-item h3 {
  margin-top: 0;
  font-size: 18px;
  color: #333;
}

.benefit-item p {
  margin: 10px 0 0;
  font-size: 14px;
  color: #666;
}

.benefit-item .content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.el-select__wrapper.is-focused {
  box-shadow: 0 0 0 1px #e85623 inset !important;
}

.el-select-dropdown__item.is-selected {
  color: #e85623 !important;
}
</style>
